<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.tag')}:`"
				>
					<el-input
						v-model.trim="queryData.tag"
						v-symbols
						clearable
						size="medium"
						style="width: 220px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.name')}:`"
				>
					<el-input
						v-model.trim="queryData.k"
						v-input="{ name: 'noEmpty' }"
						clearable
						size="medium"
						style="width: 220px; margin-right: 8px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.module')}:`"
				>
					<el-select
						v-model.trim="queryData.module"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							v-for="v in moduleList"
							:key="v"
							:label="v"
							:value="v"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
				:header-cell-style="getRowClass"
			>
				<el-table-column
					type="index"
					align="center"
					:label="$t('common.serial_number')"
					width="60"
				>
					<template slot-scope="scope">
						<span>{{ getSerialNum(scope.$index) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="k"
					align="center"
					:label="`${$t('system.parameter_dictionary.code')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.k || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="tag"
					align="center"
					:label="`${$t('system.parameter_dictionary.tag')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.tag || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="valueType"
					align="center"
					:label="`${$t('system.parameter_dictionary.type')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.valueType || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="module"
					align="center"
					:label="`${$t('system.parameter_dictionary.module')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.module || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="description"
					align="center"
					:label="`${$t('system.parameter_dictionary.comment')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.description || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="v"
					align="center"
					:label="`${$t('system.parameter_dictionary.value')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.v || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					width="200"
					:label="`${$t('common.actions')}`"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('902011')"
							type="primary"
							size="medium"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="title"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			:close-on-click-modal="false"
			width="480px"
			center
		>
			<el-divider></el-divider>
			<el-form
				ref="formSub"
				:rules="rules"
				:model="dialogForm"
				label-width="100px"
			>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.code')}:`"
					prop="k"
				>
					<el-input
						v-model.trim="dialogForm.k"
						disabled
						:placeholder="
							$t('system.parameter_dictionary.please_input_field')
						"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.tag')}:`"
					prop="tag"
				>
					<el-input
						v-model.trim="dialogForm.tag"
						v-input="{ name: 'noEmpty' }"
						:placeholder="
							$t('system.parameter_dictionary.please_input_tag')
						"
						maxlength="20"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.type')}:`"
					prop="valueType"
				>
					<el-input
						v-model="dialogForm.valueType"
						v-input="{ name: 'noEmpty' }"
						:placeholder="
							$t('system.parameter_dictionary.please_input_type')
						"
						maxlength="20"
						autocomplete="off"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.module')}:`"
					prop="module"
				>
					<el-input
						v-model="dialogForm.module"
						v-input="{ name: 'noEmpty' }"
						:placeholder="
							$t(
								'system.parameter_dictionary.please_input_module'
							)
						"
						maxlength="20"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.comment')}:`"
					prop="description"
				>
					<el-input
						v-model.trim="dialogForm.description"
						:placeholder="
							$t(
								'system.parameter_dictionary.please_input_detail'
							)
						"
						maxlength="500"
						type="textarea"
						show-word-limit
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('system.parameter_dictionary.value')}:`"
					prop="v"
					style="padding-top:10px"
				>
					<el-input
						v-model.trim="dialogForm.v"
						v-input="{ name: 'noEmpty' }"
						:placeholder="
							$t('system.parameter_dictionary.please_input_value')
						"
						autocomplete="off"
						clearable
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:disabled="dialogFormLoading"
					:loading="dialogFormLoading"
					@click="handleEdit"
				>
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
// import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import { valueRules } from './components/rules'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.parameterDictionary,
	components: { MainContent },
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {},
			tableData: [],
			moduleList: [],
			dialogFormVisible: false,
			dialogFormLoading: false,
			dialogForm: {},
			title: '',
			handleEditDisabled: false
		}
	},
	computed: {
		rules() {
			// const tagszn = (rule, value, callback) => {
			// 	var reg = /^[\u4E00-\u9FA5]+$/
			// 	if (reg.test(value)) {
			// 		callback()
			// 	} else {
			// 		callback(new Error('只能输入中文'))
			// 	}
			// }
			// const valueTypezn = (rule, value, callback) => {
			// 	var reg = /^[\u4E00-\u9FA5]+$/
			// 	if (reg.test(value)) {
			// 		callback()
			// 	} else {
			// 		callback(new Error('只能输入中文'))
			// 	}
			// }
			// const descriptionzn = (rule, value, callback) => {
			// 	var reg = /^[\u4E00-\u9FA5]+$/
			// 	if (reg.test(value)) {
			// 		callback()
			// 	} else {
			// 		callback(new Error('只能输入中文'))
			// 	}
			// }
			// const vzn = (rule, value, callback) => {
			// 	var reg = /^-?\d+$/
			// 	if (reg.test(value)) {
			// 		callback()
			// 	} else {
			// 		callback(new Error('只能输入整数'))
			// 	}
			// }
			const tagValidator = (rule, value, callback) => {
				if (value === '') {
					callback(
						this.$t('system.parameter_dictionary.tag_no_empty')
					)
				} else {
					callback()
				}
			}
			const valueTypeValidator = (rule, value, callback) => {
				if (value === '') {
					callback(
						this.$t('system.parameter_dictionary.tag_no_empty')
					)
				} else {
					callback()
				}
			}
			const descriptionValidator = (rule, value, callback) => {
				if (value === '') {
					callback(
						this.$t('system.parameter_dictionary.comment_no_empty')
					)
				} else {
					callback()
				}
				// const teg = /^[^\s]*$/
				// if (value === '') {
				// 	callback(
				// 		this.$t('system.parameter_dictionary.comment_no_empty')
				// 	)
				// } else if (teg.test(value)) {
				// 	callback()
				// } else {
				// 	callback(this.$t('system.parameter_dictionary.no_empty'))
				// }
			}
			// const vValidator = (rule, value, callback) => {
			// 	const teg = /^[^\s]*$/
			// 	if (value === '') {
			// 		callback(
			// 			this.$t('system.parameter_dictionary.value_no_empty')
			// 		)
			// 	} else if (teg.test(value)) {
			// 		callback()
			// 	} else {
			// 		callback(this.$t('system.parameter_dictionary.no_empty'))
			// 	}
			// }
			// 标签
			const tag = [
				{
					required: true,
					validator: tagValidator,
					trigger: 'blur'
				}
			]
			// 控制类型
			const valueType = [
				{
					required: true,
					validator: valueTypeValidator,
					trigger: 'blur'
				}
			]
			// 模块
			const module = [
				{
					required: true,
					message: this.$t(
						'system.parameter_dictionary.please_select_module'
					),
					trigger: 'blur'
				}
			]
			// 注释
			const description = [
				{
					required: true,
					validator: descriptionValidator,
					trigger: 'blur'
				}
			]
			// 值校验
			let vValidator = (rule, value, callback) => {
				if (value === '') {
					callback(
						this.$t('system.parameter_dictionary.value_no_empty')
					)
				} else {
					callback()
				}
			}
			if (valueRules[this.dialogForm.k]) {
				vValidator = valueRules[this.dialogForm.k]
			}
			// 值
			const v = [
				{ required: true, validator: vValidator, trigger: 'blur' }
			]
			return {
				tag,
				valueType,
				module,
				description,
				v
			}
		}
	},
	mounted() {
		this.getDictModuleList()
	},
	methods: {
		// handleInput(val) {
		// 	this.dialogForm.description = val.replace(NO_SPECIAL_CHAR, '')
		// },
		async getDictModuleList() {
			const { data } = await this.$api.queryDictModuleList()
			this.moduleList = data
		},
		loadData() {
			this.loading = true
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.getkvconfigQueryList(params)
				.then((res) => {
					this.loading = false

					const { records, total } = res.data || {}
					this.tableData = Array.isArray(records)
						? Object.freeze(records)
						: []
					this.total = total || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleEdit() {
			const data = { ...this.dialogForm }
			data.id = this.dialogForm.id
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.dialogFormLoading = true
					this.$api
						.updateDictConfig(data)
						.then(() => {
							this.$message.success(
								this.$t('common.modify_success')
							)
							this.loadData()

							this.dialogFormVisible = false
							this.dialogFormLoading = false
						})
						.catch(() => (this.dialogFormLoading = false))
				}
			})
		},
		reset() {
			this.queryData = {}
			this.pageNum = 1
			this.loadData()
		},
		edit(val) {
			this.title = this.$t('common.edit')
			this.dialogForm = Object.assign({}, val)
			this.dialogFormVisible = true
		}
	}
}
</script>

<style lang="scss" scoped>
.params {
	padding: 15px 10px 20px 10px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.fenye {
	text-align: center;
}
::v-deep .el-textarea .el-input__count {
	bottom: unset;
}
</style>
